<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>{{count}}</h1>
    <button @click = "clickToIncrementAsync">clickToIncrementAsync</button>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment: state => state.count++,
            decrement: state => state.count--,
            // 使用payload的mutation
            incrementViaPayload: (state, payload) => {
                state.count += payload.amount
            }
        },
        actions: {
            incrementAsync({ commit }) {
                setTimeout(
                    () => {
                        commit('incrementViaPayload',{ amount:10 })
                    },
                    1000
                )
            }
        }
    })

    new Vue({
        el: '#app',
        //store
        store,
        computed: {
            ...Vuex.mapState(['count'])
        },
        // actions
        methods: {
            clickToIncrementAsync() {
                this.$store.dispatch('incrementAsync')
            },
        }
    })
</script>
</body>
</html>